<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TodoApp</title>
    <script src="../static/js/vue.js"></script>
    <link rel="stylesheet" href="../static/css/todoApp.css">
</head>

<body>
<section id="todoapp">
    <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="newTodo" @keyup.enter="add" type="text" autofocus autocomplete="off" placeholder="请输入任务" class="new-todo">
    </header>
    <section class="main">
        <ul class="todolist">
            <li class="todo" v-for="(item, index) in list">
                <div class="view">
                    <span class="index">{{index+1}}.</span>
                    <label>{{item}}</label>
                    <button class="destroy" @click="remove(index)">del</button>
                </div>
            </li>
        </ul>
    </section>
    <footer class="footer" v-show="list.length > 0">
        <div>{{list.length}} left</div>
        <button @click="clear">clear</button>
    </footer>
</section>
<footer class="info">
    <a href="http://www.baidu.com">百度</a>
</footer>
<script>
    let app = new Vue({
        el: '#todoapp',
        data: {
            list: ['吃饭饭', '睡觉觉', '写文档'],
            list1:[{name:1, address: "chengdu"},{name:1, address: "chengdu"}],
            newTodo: '好好学习',
            test4Fun: {name:1, address: "chengdu"}
        },
        methods: {
            add: function() {
                let that = this;
                this.list.push(that.newTodo);
                console.log(this.list);
                console.log(this.newTodo);
            },
            remove: function(index) {
                this.list.splice(index, 1); // 删除数组中指定下标的元素 删一次
                console.log(this.list);
            },
            clear: function() {
                this.list = [];
            },
            test4Fun1:function(){

            }
        },
    })
</script>

</body>

</html>